<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" onchange="upload(event)" />
    <div id="output"></div>
  </body>
  <script>
    // 某些情况下，可能需要读取部分文件而不是整个文件。为此，File 对象提供了一个名为 slice()的方法。
    // slice()方法接收两个参数：起始字节和要读取的字节数。这个方法返回一个 Blob 的实例，而 Blob 实际上是 File 的超类。

    // blob 表示二进制大对象（binary larget object），是 JavaScript 对不可修改二进制数据的封装类型。
    // 包含字符串的数组、ArrayBuffers、ArrayBufferViews，甚至其他 Blob 都可以用来创建 blob。
    // Blob 构造函数可以接收一个 options 参数，并在其中指定 MIME 类型：
    // Blob 对象有一个 size 属性和一个 type 属性，还有一个 slice()方法用于进一步切分数据。
    // 另外也可以使用 FileReader 从 Blob 中读取数据。

    console.log(new Blob(['abc'])); //Blob {size: 3, type: ''}
    console.log(new Blob(['{"a":"b"}'], { type: 'application/json' })); //Blob {size: 9, type: 'application/json'}
    console.log(new Blob(['<p>Foo</p>', '<p>Bar</p>'], { type: 'text/html' })); //Blob {size: 20, type: 'text/html'}

    // file文件实例应该也是二进制数据，此处统一截取二进制数据。
    function blobSlice(blob, startByte, length) {
      if (blob.slice) {
        return blob.slice(startByte, length);
      } else if (blob.webkitSlice) {
        return blob.webkitSlice(startByte, length);
      } else if (blob.mozSlice) {
        return blob.mozSlice(startByte, length);
      } else {
        return null;
      }
    }
    const outputDOM = document.getElementById('output');
    //读取部分文件对象。
    function upload(event) {
      let files = event.target.files;
      let fileReader = new FileReader();
      let blob = blobSlice(files[0],0,64);
      if(blob){
        console.log('blob',blob);
        fileReader.readAsText(blob);
        fileReader.onload = function () {
        console.log('fileReader.result--',fileReader.result);
        outputDOM.innerHTML = fileReader.result;
      };
      }
    }
    // fileReader.result-- 20201101
    // loan                              贷款首页
    // loanEx
  </script>
</html>
